<script>
import Demand from "./enum/Demand.ts"
import GoodsType from "./enum/GoodsType.ts"

export default {
	data() {
		return {
			GoodsType,
			serviceShow: false,
			orderId: '',
			demandList: [
				{ checked: false, label: this.$t('运输'), value: Demand.YUNSHU },
				{ checked: false, label: this.$t('报关'), value: Demand.BAOGUAN },
				{ checked: false, label: this.$t('转关'), value: Demand.ZHUANGUAN },
				{ checked: false, label: this.$t('清关'), value: Demand.QINGGUAN },
			]
		}
	},
	onLoad(options) {
		this.$store.commit("publishFormDataInit")
		if (options.orderId) {
			this.orderId = options.orderId
		}
	},
	computed: {
		isCheckedAll() {
			return this.demandList.length == this.$store.state.publishCommonBody.demand.split(',').length;
		}
	},
	methods: {
		submit() {
			if (this.demandList.filter(ditem => ditem.checked).length == 0 && this.$store.state.publishCommonBody.goods_type != GoodsType.XIAOJIAN) {
				this.toast("请选择物流需求");
				return
			}
			console.log('this.orderId---1111111', this.orderId)
			uni.redirectTo({
				url: `/pages/publish/to?orderId=${this.orderId}`,
				notInFrame: true
			})
		},
		updateCommonDemand() {
			this.$store.state.publishCommonBody.demand = this.demandList.filter(ditem => ditem.checked).map(ditem => ditem.value).join(',')
		},
		checkedAll() {
			const state = this.demandList.length == this.$store.state.publishCommonBody.demand.split(',').length;
			this.demandList.forEach(ditem => ditem.checked = !state)
			this.updateCommonDemand()
		},
		clearChecked() {
			this.demandList.forEach(ditem => ditem.checked = false)
			this.updateCommonDemand()
		},
		back() {
			// uni.navigateBack()
			this.cback()
		},
	}
}
</script>

<template>
	<view class="h-full">
		<div style="height:50rpx"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('选择类型')}}
		</div>
		<view class="start-container">
			<div style="height: 350rpx;"></div>
			<div class="section between p-30"
				@click="serviceShow = true; $store.state.publishCommonBody.goods_type = GoodsType.DAJIAN">
				<div class="flex">
					<image src="/static/icon/large.png" mode="widthFix" class="w-75"></image>
					<div class="fz32 text-blue ml-20 font-bold">{{$t('大件物流')}} </div>
				</div>
				<image src="/static/icon/right.png" mode="widthFix" class="w-30"></image>
			</div>

			<div class="section between p-30"
				@click="$store.state.publishCommonBody.goods_type = GoodsType.XIAOJIAN; $store.state.publishCommonBody.demand = '1'; submit()">
				<div class="flex">
					<image src="/static/icon/small.png" mode="widthFix" class="w-75"></image>
					<div class="fz32 text-blue ml-20 font-bold">{{$t('小件快递')}}</div>
				</div>
				<image src="/static/icon/right.png" mode="widthFix" class="w-30"></image>
			</div>

	

		</view>
		<u-popup :show="serviceShow" round="50">
			<div class="p-30 between flex-col" style="height: 1100rpx;align-items: stretch;">
				<div class="mt-10">
					<div class="between fz28 mb-35">
						<div class="font-bold fz36">{{$t('请选择')}} {{ $store.state.publishCommonBody.goods_type ==
							GoodsType.DAJIAN
							? '大件物流' : $t('小件快递') }} {{$t('需求')}} <text class="text-gray-900 fz28 ml-20"
								style="font-weight: initial;">({{$t('多选')}})</text> </div>
						<div class="text-gray-900" @click="serviceShow = false">
							<image src="/static/icon/close.png" mode="widthFix" class="w-25"></image>
						</div>
					</div>

					<div class="between">

						<label class="radio text-gray-600" @click="checkedAll()">
							<radio :checked="isCheckedAll" /><text class="fz28">{{$t('全选')}}</text>
						</label>
						<div class="flex" @click="clearChecked()">
							<image src="/static/icon/reset.png" mode="widthFix" class="w-25"></image>
							<div class="ml-8 fz28 text-gray-900">{{$t('重置')}}</div>
						</div>
					</div>
					<div class="service-item border h-100 mt-35 center rounded-50 text-333 fz32"
						:class="{ 'border-0 bg-blue text-white': item.checked }" v-for="item in demandList"
						:key="item.value" @click="() => {
							item.checked = !item.checked;
							updateCommonDemand();
						}">
						{{ item.label }}</div>

				</div>

				<div class="bg-primary center fz30 text-white rounded-50 h-100 mt-35" @click="submit">{{$t('去发布')}}</div>
			</div>
			</u-popup>

	</view>
</template>



<style>
.border {
	border: 1rpx solid #F0F0F0;
}

.border-0 {
	border: 0;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.section {
	border-radius: 18rpx;
	height: 139rpx;
	width: 700rpx;
	margin: 0 auto;
	backdrop-filter: blur(16rpx);
	box-shadow: 0rpx 4rpx 20.5rpx 0rpx #9AD0FF94, 0rpx 4rpx 14.5rpx 0rpx #FFFFFF inset;
	margin-bottom: 20rpx;
}

.start-container {
	height: 100%;
	background: url("/static/bg/start.png") no-repeat top / 100%;
	background-position-y: -100rpx;
}

.text-white {
	color: #fff;
}

page {
	width: 100%;
	background-color: #F6F7FB;
	height: 100%;
}


</style>